import {DOCUMENT} from '@angular/common';
import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';
import {ALAIN_I18N_TOKEN, SettingsService} from '@delon/theme';
import {InputBoolean} from '@delon/util';

import {I18NService} from '@core';

@Component({
    selector: 'header-i18n',
    template: `
        <div *ngIf="showLangText" nz-dropdown [nzDropdownMenu]="langMenu" nzPlacement="bottomRight" class="alain-default__nav-item">
            <i nz-icon nzType="global" nzTheme="outline"></i>
        </div>
        <i *ngIf="!showLangText"
           nz-dropdown
           [nzDropdownMenu]="langMenu"
           nzPlacement="bottomRight"
           nz-icon
           nzType="global"
        ></i>
        <nz-dropdown-menu #langMenu="nzDropdownMenu">
            <ul nz-menu>
                <li
                        nz-menu-item
                        *ngFor="let item of langs"
                        [nzSelected]="item.code === curLangCode"
                        (click)="change(item.code)"
                >
                    <span role="img" [attr.aria-label]="item.text" class="pr-xs">{{ item.abbr }}</span>
                    {{ item.text }}
                </li>
            </ul>
        </nz-dropdown-menu>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class I18nComponent {
    /** Whether to display language text */
    @Input() @InputBoolean() showLangText = true;

    get langs() {
        return this.i18n.getLangs();
    }

    get curLangCode() {
        return this.settings.layout.lang;
    }

    constructor(
        private settings: SettingsService,
        @Inject(ALAIN_I18N_TOKEN) private i18n: I18NService,
        @Inject(DOCUMENT) private doc: any,
    ) {
    }

    change(lang: string) {
        const spinEl = this.doc.createElement('div');
        spinEl.setAttribute('class', `page-loading ant-spin ant-spin-lg ant-spin-spinning`);
        spinEl.innerHTML = `<span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span>`;
        this.doc.body.appendChild(spinEl);

        this.i18n.use(lang);
        this.settings.setLayout('lang', lang);
        setTimeout(() => this.doc.location.reload());
    }
}
